<script lang="ts" setup>
import type { UploadProps } from 'element-plus'
import defaultUrl from '/logo.svg'

const { modelValue } = defineModels<{
  modelValue: string
}>()

const onSuccess: UploadProps['onSuccess'] = (response, uploadFile) => {
  modelValue.value = uploadFile.url!
}
</script>

<template>
  <Uploader
    class="h-full flex items-center justify-center"
    :show-file-list="false"
    :on-success="onSuccess"
  >
    <template #default>
      <div class="flex items-center justify-center">
        <el-image
          class="avatar mx-3 h-7 w-7 cursor-pointer rounded-full"
          fit="cover"
          alt="avatar"
          :src="modelValue || defaultUrl"
        />
      </div>
    </template>
  </Uploader>
</template>
